<template>
	<div class="personalCenter" :element-loading-text="loadingText">
		<!--banner图-->
		<div class="banner">
			<!--个人头像-->
			<div class="avatar">
				<!-- <el-avatar :size="80" :src="userInfo.picUrl"></el-avatar> -->
				<userAvatar  />
				<h5 style="margin-top: 0.625rem;">{{userInfo.name}}</h5>
				<el-tag effect="dark" type="info" class="isLiveTag" v-if="isLive" @click="toLiveRoom">直播中...</el-tag>
				<el-button style="margin-top: 0.625rem;" @click="drawer = true">查看我的关注</el-button>
			</div>
		</div>

		<!--个人具体信息-->
		<div class="info pb3">
			<div class="container">
				<!--个人信息简述-->
				<div class="infoSum">
					<div class="infoSum-title">
						<span>个人信息简述</span>
					</div>
					<div class="infoSum-content">

					</div>
				</div>
				<!--其余详细信息-->
				<div class="infoContent" style="margin-top: -0.5rem;">
					<el-row :gutter="24">
						<!--地区-->
						<el-col :md="12" :sm="12" :xs="24">
							<div class=" bt-line pb2">
								<span class="spanTitle">昵称：</span>{{userInfoList.userName}}
							</div>
						</el-col>

						<!--邮箱-->
						<el-col :md="12" :sm="12" :xs="24">
							<div class=" bt-line pb2">
								<span class="spanTitle">硬币：</span>{{userInfoList.coin}}
							</div>
						</el-col>

						<!--性别-->
						<el-col :md="12" :sm="12" :xs="24">
							<div class=" bt-line pb2 pt3">
								<span class="spanTitle">手机号：</span>{{userInfoList.phone}}
							</div>
						</el-col>

						<!--直播间号码-->
						<el-col :md="12" :sm="12" :xs="24">
							<div class=" bt-line pb2 pt3">
								<span class="spanTitle">我的直播间：</span>
								<el-button @click="toLive($store.state.user.userid)" class="ml1"
									v-if="isanchor == true">
									去直播
								</el-button>
								<el-button @click="toGetLiveNum" class="ml1"
									v-else>
									创建直播
								</el-button>
								<!-- <el-button @click="createLive"
									v-else-if="userInfoList.appid && userInfoList.appid !== '*******'" class="ml1">创建直播
								</el-button> -->
							</div>
						</el-col>

						<!--用户简介-->
						<el-col :md="12" :sm="12" :xs="24">
							<div class="  pb2 pt3">
								<span class="spanTitle">用户简介：{{userInfoList.userSum}}</span>
								<div class="infoSum-content">

								</div>
							</div>
						</el-col>
						<el-col :md="24" :sm="24" :xs="24">
							<div class="  pb2">
								<el-row :gutter="24">
									<div v-for="n in 6">
										<el-col :span="4">
											<el-card class="mycard">
												<img class="myimg" src="../../../public/img/coin.png" />
												<p class="myp">+5 Y币 </p>
												<el-button class="mybutton" type="primary" round size="mini"
													v-if="signTimes == (n-1) && signType ==0" @click="sign()">签到
												</el-button>
												<el-button class="mybutton" round size="mini"
													v-if="signTimes == (n-1) && signType ==1" disabled>𒆙已签到</el-button>
												<!-- 遮罩层 -->
												<div class="zhezhao" v-if="signTimes>=n">
													<img class="myZimg" src="../../../public/img/gou.png" />
													<p style="opacity: 1;color: #ffffff;margin-top: 1.25rem;">已签到</p>
												</div>
											</el-card>
										</el-col>
									</div>
								</el-row>
							</div>
						</el-col>
						<el-col :md="24" :sm="24" :xs="24">
							<div class="  pb2 pt3">
								<span class="spanTitle">积分记录：</span>
								<el-table ref="filterTable" :data="tableData" style="width: 100%;margin-top: 0.625rem;">
									<el-table-column prop="giftTime" label="日期" width="260">
									</el-table-column>
									<el-table-column label="获取/使用积分">
										<template slot-scope="scope">
											<p v-if="scope.row.getUserId==userid&&scope.row.setUserId!=null">礼物收入</p>
											<p v-else-if="scope.row.getUserId!=null&&scope.row.setUserId==userid">礼物支出
											</p>
											<p v-else-if="scope.row.setUserId==null">系统赠送</p>
											<p v-else-if="scope.row.getUserId==null">系统支出</p>
										</template>
									</el-table-column>
									<el-table-column label="数额" width="380" >
										<template slot-scope="scope">
											<p v-if="scope.row.setUserId == userid">-{{scope.row.memo}}</p>
											<p v-else>+{{scope.row.memo}}</p>
										</template>
									</el-table-column>
									<el-table-column label="标签" width="100" 
										filter-placement="bottom-end">
										<template slot-scope="scope">
											<el-tag type="danger" disable-transitions
												v-if='scope.row.setUserId == userid'>支出</el-tag>
											<el-tag type="success" disable-transitions v-else>收入</el-tag>
										</template>
									</el-table-column>
								</el-table>
								<div style="margin: auto;text-align: center;">
									<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
										@pagination="getProfit" />
								</div>

							</div>
						</el-col>
					</el-row>
					<br />
					<el-button class="mb2" v-show="isUserSelf" @click="toEdit">编辑</el-button>
				</div>
			</div>
		</div>

		<!--    创建直播间的弹框-->
		<el-dialog title="直播间创建" :visible.sync="dialogVisible" width="50%">
			<div class="createLiveInfo">
				<h6>请填写房间信息</h6>
				<div class="liveRoomInfo">
					<el-form label-position="right" ref="roomForm" :rules="rules" :model="roomForm" label-width="100px">
						<el-form-item label="主播" prop="username">
							<el-input v-model="roomForm.name" disabled></el-input>
						</el-form-item>
						<el-form-item label="直播间标题" prop="channelName">
							<el-input v-model="roomForm.channelName"></el-input>
						</el-form-item>
						<el-form-item label="直播间简介">
							<el-input v-model="roomForm.channelSum" type="textarea" placeholder="请输入直播间简介（可不输入）"
								:rows="2"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="toCreateLiveRoom('roomForm')">创建直播间</el-button>
			</span>
		</el-dialog>

		<el-drawer title="我的关注" :visible.sync="drawer" direction="ltr" >
			<el-row :gutter="12" style="height: 700px; overflow: scroll;">
				<el-col :span="24" v-for="a in attention">
					<el-card class="box-card" style="margin-top: 0.625rem;">
						<div class="text item" style="text-align: center;">
							<img class="img_attention" :src="a.coverPhoto"/>
							{{a.title}}
						</div>
					</el-card>
				</el-col>
			</el-row>
			</span>
		</el-drawer>
	</div>
</template>

<script src="./personalCenter.js"></script>

<style scoped lang="scss">
	@import "personalCenter";
</style>
